<template>
  <div>
    <div class="login_box">
      <div class="title">自 动 化 测 试 平 台</div>
      <el-form :rules="loginRules" ref="loginRef" :model="loginForm">
        <el-form-item prop="username">
          <el-input
            prefix-icon="el-icon-user-solid"
            placeholder="请输入账户"
            v-model.trim="loginForm.username"
          ></el-input>
        </el-form-item>

        <el-form-item prop="password">
          <el-input
            prefix-icon="el-icon-lock"
            placeholder="请输入密码"
            v-model.trim="loginForm.password"
            show-password
          ></el-input>
        </el-form-item>

        <el-form-item label="记住账户">
          <el-switch v-model="status"></el-switch>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" style="width:100%" @click="login">点击登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    // 这里存放数据
    return {
      loginForm: {
        username: '',
        password: '',
      },
      status: false,
      loginRules: {
        username: [
          { required: true, message: '账号不能为空', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
        ],
      },
    }
  },
  // 计算属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {
    status: function (val) {
      if (val) {
        // 勾选了记住账户
        window.localStorage.setItem('uname', this.loginForm.username)
        window.localStorage.setItem('upwd', this.loginForm.password)
      } else {
        // 关闭了记住账户
        window.localStorage.removeItem('uname')
        window.localStorage.removeItem('upwd')
      }
    },
  },
  // 方法集合
  methods: {
    // 登录
    login() {
      // 发送登录请求之前 对表单进行校验
      this.$refs.loginRef.validate(async (valid) => {
        if (valid) {
          const response = await this.$api.login(this.loginForm)
          if (response.status === 200) {
            window.sessionStorage.setItem('token', response.data.token)
            if (this.status) {
              window.localStorage.setItem('uname', this.loginForm.username)
              window.localStorage.setItem('upwd', this.loginForm.password)
            }
            window.sessionStorage.setItem('username', this.loginForm.username)
            this.$router.push({ name: 'allProject' })
            this.$message({
              message: '登录成功!',
              type: 'success',
            })
          }
        } else {
          return false
        }
      })
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    const username = window.localStorage.getItem('uname')
    const password = window.localStorage.getItem('upwd')
    if (username && password) {
      this.loginForm.username = username
      this.loginForm.password = password
      this.status = true
    }
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped>
/* 登录框样式 */
.login_box {
  width: 600px;
  height: 400px;
  box-shadow: 0 0 10px #000000;
  border-radius: 5px;
  /* margin: 100px auto; */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}
/* 标题样式 */
.title {
  font: bold 24px/80px 'microsoft yahei';
  text-align: center;
  color: #00aaff;
  padding: 25px;
  top: 25%;
}
.el-form {
  padding: 0 50px;
}
</style>